<style type="text/css">
.iconMarkder .file-preview-frame{
    height: 80px;
}   
.iconMarkder .file-preview-image{
    height: 80px;
    cursor: pointer;
}
.iconMarkder .file-preview-frame.active{
    box-shadow: 3px 3px 5px 0px #333
}
.apptext{
    position: absolute;
    font-size: 38px;
    margin-top: -64px;
    margin-left: 20px;
    color: #fff;
    /*top: 100px;*/
    /*left: 34px */
}
</style>
    <div class="form-title">选择背景</div>
<div class="row">
    <div class="file-preview-thumbnails iconMarkder">
        <div class="file-preview-frame active" >           
            <img src="resource/appiconbg/1.png" class="file-preview-image "  >
        </div>
    </div>

    <div class="file-preview-thumbnails iconMarkder">
        <div class="file-preview-frame" >
            <img src="resource/appiconbg/2.png" class="file-preview-image "  >
        </div>
    </div>

    <div class="file-preview-thumbnails iconMarkder">
        <div class="file-preview-frame" >
            <img src="resource/appiconbg/3.png" class="file-preview-image "  >
        </div>
    </div>

    <div class="file-preview-thumbnails iconMarkder">
        <div class="file-preview-frame" >
            <img src="resource/appiconbg/4.png" class="file-preview-image "  >
        </div>
    </div>

    <div class="file-preview-thumbnails iconMarkder">
        <div class="file-preview-frame" >
            <img src="resource/appiconbg/5.png" class="file-preview-image "  >
        </div>
    </div>

    <div class="file-preview-thumbnails iconMarkder">
        <div class="file-preview-frame" >
            <img src="resource/appiconbg/6.png" class="file-preview-image "  >
            
        </div>
    </div>
</div>
<div class="form-title">文字</div>
<div class="row">
    <div class="col-md-4">
        <input placeholder="请输入最多一个字" type="text" name="preview-txt" class="form-control"/>
    </div>
    <div class="col-md-2">
        <button type="button" class="btn btn-info preview">预览</button>
        <button type="button" class="btn btn-primary marker">制作</button>
    </div>
</div>
<script type="text/javascript">
$(function(){
    $('.iconMarkder .file-preview-frame').on('click',function(){
        $('.iconMarkder .file-preview-frame').removeClass('active');
        $(this).addClass('active');
    })
    $('button.preview').on('click',function(){
        $('.iconMarkder .file-preview-frame').find('.apptext').remove();
        var txt = $('[name=preview-txt]').val();
        $('.iconMarkder .file-preview-frame.active').append('<div class="apptext">'+txt+'</div>');
    })

    $('button.marker').on('click',function(){
        var txt = $('[name=preview-txt]').val();
        var url = "{:U("FileManger/markerAppicon?apid=$apid")}";
        var bg = $('.iconMarkder .file-preview-frame.active').find('img').attr('src');
        $.get(url,{bg:bg,txt:txt},function(){
            BootstrapDialog.closeAll();
        })
        //
    })
})    
</script>